import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
import { cn } from '@/lib/utils';

interface ScrollProgressProps {
	className?: string;
}

const ScrollProgress = defineComponent({
	name: 'ScrollProgress',
	props: {
		className: {
			type: String,
			default: '',
		},
	},
	setup(props: ScrollProgressProps) {
		const scrollYProgress = ref(0);

		const updateScrollProgress = () => {
			const scrollTop = window.scrollY;
			const windowHeight =
				document.documentElement.scrollHeight - window.innerHeight;
			scrollYProgress.value = (scrollTop / windowHeight) * 100;
		};

		onMounted(() => {
			window.addEventListener('scroll', updateScrollProgress);
		});

		onUnmounted(() => {
			window.removeEventListener('scroll', updateScrollProgress);
		});

		return () => (
			<div
				class={cn(
					'fixed inset-x-0 top-0 z-[10000] h-2 bg-gradient-to-r from-[#b0e5f3] via-[#66b8db] to-[#0e304d]',
					props.className
				)}
				style={{
					width: `${scrollYProgress.value}%`,
				}}
			/>
		);
	},
});

export default ScrollProgress;
